

// button prefix means 1x1 2x2 x3
let vgaButton = document.querySelector("button#vga")
let qvgaButton = document.querySelector("button#qvga")
let hdButton = document.querySelector("button#hd")


video = document.querySelector("video")

let stream = null;

function successCallback(gotStream) {

    video.srcObject = gotStream
    stream = gotStream
    video.play().then()
}

function errorCallback(error) {

    console.log("navigator.getUserMedia error: ", error)
}

let vgaConstrains = {

    video: {
        mandatory:{

            maxWidth: 640,
            maxHeight: 480,
        }
    }
}

let qvgaConstraints = {

    video: {
        mandatory:{

            maxWidth: 320,
            maxHeight: 240,
        }
    }
};

let hdConstrains = {

    video: {
        mandatory:{

            maxWidth: 1280,
            maxHeight: 960,
        }
    }
}

qvgaButton.onclick = function () {

    getMedia(qvgaConstraints)
}

vgaButton.onclick = function () {

    getMedia(vgaConstrains)
}

hdButton.onclick = function () {

    getMedia(hdConstrains)
}

function getMedia(constrains) {

    if (!!stream) {

        video.srcObject = null
        stream = null
    }
    navigator.mediaDevices.getUserMedia(constrains).then(function (newStream) {

        successCallback(newStream)
    }).catch(function (error) {

        errorCallback(error)
    })
}


